<template>
  <div class="page-playLine">
    <filter-view />
    <a-table
      id="pauseAdTable"
      :pagination="false"
      row-key="id"
      :columns="columns"
      :data-source="state.playLineList"
      :loading="state.loading"
      :scroll="{ x: 1500 }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'sort'">
          <menu-outlined />
        </template>
        <template v-else-if="column.key === 'lineDomainList'">
          <a-tooltip
            placement="top"
            :overlayStyle="{
              width: '424px',
              borderRadius: '3px',
              maxWidth: '424px',
              maxHeight: '240px'
            }"
            overlayClassName="list"
            color="#fff"
          >
            <template #title>
              <a-table
                :pagination="false"
                :columns="tooltipColumn"
                :data-source="record.lineDomainList"
                :scroll="{ y: 180 }"
              ></a-table>
            </template>
            <div class="ellipsis-content">
              <div class="ellipsis-content-text">{{ record.lineDomainList[0].lineDomain }}</div>
              <span class="ellipsis-content-length">...{{ record.lineDomainList.length }}</span>
            </div>
          </a-tooltip>
        </template>
        <template v-else-if="column.key === 'status'">
          <span>
            <a-switch
              v-model:checked="record.status"
              :checkedValue="1"
              :unCheckedValue="2"
              @change="editStatus(record)"
            />
          </span>
        </template>
        <template v-else-if="column.key === 'action'">
          <span>
            <a class="basicColor" @click="updateLine(record)">编辑</a>
            <a-divider type="vertical" />
            <a class="basicColor" @click="deleteListLine(record)"> 删除 </a>
          </span>
        </template>
      </template>
    </a-table>
    <!-- 删除对话框 -->
    <modal-view
      title="提示"
      v-model:visible="deleteVisible"
      okText="确定"
      cancelText="取消"
      :width="458"
      @confirm="deleteConfirm"
      @cancel="deleteCancel"
    >
      <span>确定要删除该线路吗</span>
    </modal-view>
    <!-- 添加播放线路 -->
    <modal-view
      :title="playLineState.isAdd ? '添加播放线路' : '编辑播放线路'"
      v-model:visible="playLineState.playLineVisible"
      okText="确定"
      cancelText="取消"
      @confirm="addLineConfirm"
      @cancel="addLineCancel"
      :width="660"
    >
      <a-form ref="lineFormRef" class="dialog-form" :model="lineFormState">
        <a-form-item
          label="线路名称"
          name="lineName"
          :colon="false"
          :rules="{
            required: true,
            message: '请输入线路名称'
          }"
        >
          <a-input v-model:value.trim="lineFormState.lineName" placeholder="请输入线路名称" class="w-508" />
        </a-form-item>
        <a-form-item
          label="线路域名"
          name="lineDomainList"
          :rules="{
            required: true
          }"
          :colon="false"
        >
          <div class="dialog-form-container">
            <a-table
              bordered
              :pagination="false"
              :columns="dialogColumn"
              :data-source="lineFormState.lineDomainList"
              :scroll="{ y: 180 }"
            >
              <template #bodyCell="{ column, record, index }">
                <template v-if="column.key === 'lineDomain'">
                  <a-form-item
                    :name="['lineDomainList', index, 'lineDomain']"
                    :rules="{
                      required: true,
                      message: '请输入线路域名'
                    }"
                  >
                    <a-input v-model:value.trim="record.lineDomain" placeholder="请输入线路域名" class="w-229" />
                  </a-form-item>
                </template>
                <template v-else-if="column.key === 'serverTag'">
                  <a-form-item
                    :name="['lineDomainList', index, 'serverTag']"
                    :rules="{
                      required: true,
                      message: '请输入种源服务标识'
                    }"
                  >
                    <a-input v-model:value.trim="record.serverTag" placeholder="请输入种源服务标识" class="w-178" />
                  </a-form-item>
                </template>
                <template v-else-if="column.key === 'action'">
                  <i class="iconfont icon-delete text-[20px] text-[#fe4c4d]" @click="deleteDialogLine(record, index)" />
                </template>
              </template>
            </a-table>
            <div class="dialog-form-container-bottom">
              <span
                class="dialog-form-container-bottom-addDomain"
                v-if="lineFormState.lineDomainList.length < 10"
                @click="addDomain"
                ><plus-square-outlined /> 添加域名</span
              >
              <span class="dialog-form-container-bottom-tip"
                >种源服务器标志，用于定位线路域名解析地址与种源资源存储服务器地址一致</span
              >
            </div>
          </div>
        </a-form-item>
        <a-form-item label="备注" name="remark" :colon="false">
          <a-input v-model:value.trim="lineFormState.remark" placeholder="请输入备注" class="w-508" />
        </a-form-item>
      </a-form>
    </modal-view>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, watch } from 'vue'
import { message } from 'ant-design-vue'
import FilterView from './components/FilterView.vue'
import { column, lineData } from '../dataSource'
import { playLineState } from './state'
import type { PlayLineData, IDomain } from '@/types/system/systemConfig'
import ModalView from '@/components/components/modal/ModalView.vue'
const columns = ref(column)
const deleteVisible = ref(false)
const lineFormRef = ref()
const state = reactive<{ loading: boolean; playLineList: PlayLineData[] }>({
  loading: false,
  playLineList: [] as PlayLineData[]
})
interface LineData {
  lineName: string
  lineDomainList: IDomain[]
  remark: string
}

//表格tooltip column
const tooltipColumn = [
  { title: '线路域名', key: 'lineDomain', dataIndex: 'lineDomain', ellipsis: true },
  { title: '种源节点标识', key: 'serverTag', dataIndex: 'serverTag' }
]
//添加编辑formState
const lineFormState = reactive<LineData>({
  lineName: '',
  lineDomainList: [],
  remark: ''
})
//  添加编辑 column
const dialogColumn = [
  {
    title: '线路域名',
    key: 'lineDomain',
    dataIndex: 'lineDomain',
    ellipsis: true,
    scopedSlots: {
      customRender: 'lineDomain'
    }
  },
  {
    title: '种源节点标识',
    key: 'serverTag',
    dataIndex: 'serverTag',
    scopedSlots: {
      customRender: 'serverTag'
    }
  },
  { title: '操作', key: 'action', width: 70 }
]
//获取播放线路列表接口
const getPlayLineList = () => {
  state.loading = true
  console.log('getActiveList')
  // 更新列表接口
  setTimeout(async () => {
    const res = await Promise.resolve(lineData)
    state.playLineList = res
    state.loading = false
  }, 1000)
}
//表格删除播放线路
const deleteListLine = (item: PlayLineData) => {
  console.log('item: ', item)
  deleteVisible.value = true
}
//编辑播放线路
const updateLine = (item: PlayLineData) => {
  console.log('item: ', item)
  playLineState.isAdd = false
  playLineState.playLineVisible = true
  lineFormState.lineName = item.lineName
  lineFormState.lineDomainList = item.lineDomainList
  console.log('lineFormState.lineDomainList1: ', lineFormState.lineDomainList)
}
//弹窗删除播放线路
const deleteDialogLine = (item: IDomain, index: number) => {
  if (lineFormState.lineDomainList.length <= 1) {
    message.warning('不能继续删除了，已为您重置当前数据')
    lineFormState.lineDomainList[index].lineDomain = ''
    lineFormState.lineDomainList[index].serverTag = ''
    return false
  }
  console.log('index: ', index)
  console.log('lineFormState.lineDomainList2: ', lineFormState.lineDomainList[index])
  lineFormState.lineDomainList.splice(index, 1)
}
//弹窗添加域名
const addDomain = () => {
  const length = lineFormState.lineDomainList.length
  lineFormState.lineDomainList.push({
    lineDomain: '',
    serverTag: '',
    id: lineFormState.lineDomainList[length - 1].id + 1
  })
}
const editStatus = (row: PlayLineData) => {
  const status = row.status === 1 ? 2 : 1
  // try {
  // await getList({
  //   id: row.id,
  //   status
  // })
  row.status = status
  getPlayLineList()
}
/**
  添加子类对话框事件
 */
const addLineConfirm = (value: any) => {
  lineFormRef.value.validate().then(() => {
    console.log(lineFormState)
    playLineState.playLineVisible = value
  })
}
const addLineCancel = () => {
  lineFormRef.value.resetFields() //关闭弹窗清空表单
  playLineState.playLineVisible = false
  getPlayLineList()
}
/**
  删除分类对话框事件
 */
const deleteConfirm = (value: any) => {
  console.log('value: ', value)
  deleteVisible.value = value
}
const deleteCancel = () => {
  deleteVisible.value = false
}

onMounted(() => {
  getPlayLineList()
})
</script>
<style lang="less" scoped>
@basicColor: #0083ff;
:depp(.ant-table-fixed-header .ant-table-scroll .ant-table-header) {
  background: #fff !important;
  box-sizing: border-box !important;
}
:deep(.ant-table-body) {
  &::-webkit-scrollbar {
    height: 12px;
    width: 8px;
    overflow-y: auto;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background: #939392;
  }
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: 0;
    border-radius: 0;
    background: #d9d9d9;
  }
}
.ant-tooltip {
  // padding: 16px;
  color: #262626;
  :deep(.ant-table-tbody > tr > th) {
    padding: 12px 16px !important;
  }
  .ant-tooltip-content {
    height: 240px;
    color: #262626;
    :deep(.ant-table-tbody > tr > th) {
      padding: 12px 16px !important;
    }
  }
  .ant-tooltip-inner {
    height: 240px;
    color: #262626;
    :deep(.ant-table-tbody > tr > th) {
      padding: 12px 16px !important;
    }
  }
}

:deep(.list) {
  background-color: red;
  width: 100%;
  height: 100%;
  max-height: 240px;
  border-radius: 3px;
  overflow: scroll;
  color: #262626;

  &-tooltip {
    border: 1px solid rgba(217, 217, 217, 1);
    &-title {
      height: 48px;
      color: #262626;
    }
    &-item {
      &-content {
        height: 48px;
        display: flex;
        justify-content: space-between;
        color: #262626;
      }
    }
  }
}
:deep(.ant-form-item-label) {
  width: 80px;
  text-align: right;
}

.dialog-form {
  &-container {
    &-bottom {
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      &-addDomain {
        font-size: 14px;
        color: #0083ff;
        display: flex;
        align-items: center;
        cursor: pointer;
        .anticon {
          font-size: 16px;
          margin-right: 8px;
        }
      }
      &-tip {
        font-size: 12px;
        color: #bfbfbf;
      }
    }
  }
}
.page-playLine {
  padding-top: 6px;
  box-sizing: border-box;

  :deep(.ant-table-thead > tr > th) {
    color: #262626;
    font-weight: 500;
  }
  .w-508 {
    width: 508px;
  }
  .w-229 {
    width: 229px;
  }
  .w-178 {
    width: 178px;
  }
  :deep(.ant-table-thead
      > tr
      > th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before) {
    width: 0;
  }

  :deep(.ant-table-cell .ant-table-cell-with-append) {
    display: flex;
    align-items: center;
  }
  :deep(.ellipsis-content) {
    display: flex;
    cursor: pointer;
    &-text {
      // max-width: 153px !important;
      // white-space: nowrap;
      // overflow: hidden;
      // white-space: nowrap;
      // text-overflow: ellipsis;
    }
    &-length {
      color: @basicColor;
    }
  }

  .basicColor {
    color: @basicColor;
  }
}
</style>
